<template>
  <div class="payroll-detials">
    <div class="page-header">
      <div class="title">实发金额(元)</div>
      <div class="payroll-value">{{ info.ACTUAL_FEE }}</div>
      <div class="payroll-month">{{ info.MONTH_ID }}</div>

      <div class="user-info">
        <div class="info-item">{{ info.UNIT_NAME }} - {{ info.DEPART_NAME }}</div>
        <div class="info-item">{{ info.STAFF_ID }}</div>
        <div class="info-item">{{ info.STAFF_NAME }}</div>
      </div>
    </div>
    <div class="page-body">
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">实发</span>
          <span class="info-value">{{ info.ACTUAL_FEE }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">工资总额</span>
          <span class="info-value">{{ info.TOTAL_WAGES }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">岗位工资</span>
          <span class="info-value">{{ info.POST_SAL }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">综合补贴</span>
          <span class="info-value">{{ info.COM_SUB }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">保留工资</span>
          <span class="info-value">{{ info.RETAIN_SAL }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">基础绩效工资</span>
          <span class="info-value">{{ info.BASE_PERF_SAL }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">增量分享薪酬</span>
          <span class="info-value">{{ info.INCR_SHA_SAL }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">项目制激励</span>
          <span class="info-value">{{ info.PRO_EXC }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">抢盘绩效(成员)</span>
          <span class="info-value">{{ info.QP_SAL_PERS }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">抢盘绩效(小CEO)</span>
          <span class="info-value">{{ info.QP_SAL_CEO }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">小CEO基础绩效</span>
          <span class="info-value">{{ info.CEO_BASE_PERF }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">积分绩效</span>
          <span class="info-value">{{ info.SCO_PERF }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">评价绩效</span>
          <span class="info-value">{{ info.EVA_PERF }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">综合评价绩效</span>
          <span class="info-value">{{ info.ALL_EVA_PERF }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">场景化绩效</span>
          <span class="info-value">{{ info.SCE_PERF }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">负面清单(负数为扣罚)</span>
          <span class="info-value">{{ info.NO_LIST }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">其他</span>
          <span class="info-value">{{ info.OTH_PERF }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">绩效工资小计</span>
          <span class="info-value">{{ info.TOTAL_PERF }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">夜班费</span>
          <span class="info-value">{{ info.NIGHT_FEE }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">加班费</span>
          <span class="info-value">{{ info.ADWORD_FEE }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">专项补贴</span>
          <span class="info-value">{{ info.ZXBT }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">专项奖励1</span>
          <span class="info-value">{{ info.ZXJL1 }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">专项奖励2</span>
          <span class="info-value">{{ info.ZXJL2 }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">年度绩效</span>
          <span class="info-value">{{ info.YEAR_PERF }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">补发</span>
          <span class="info-value">{{ info.REISSUE_FEE }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">考勤及考核扣款(负数)</span>
          <span class="info-value">{{ info.CHK_WORK_FEE }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">取暖补贴(税前)</span>
          <span class="info-value">{{ info.QNBT_SQ }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">取暖补贴(税后)</span>
          <span class="info-value">{{ info.QNBT_SH }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">交通补贴(税前)</span>
          <span class="info-value">{{ info.JTBT_SQ }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">交通补贴(税后)</span>
          <span class="info-value">{{ info.JTBT_SH }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">女工补助</span>
          <span class="info-value">{{ info.WOMEN_BT }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">独子补贴</span>
          <span class="info-value">{{ info.ONESON_BT }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">补助</span>
          <span class="info-value">{{ info.SUBSIDY_FEE }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">其他</span>
          <span class="info-value">{{ info.OTHER_BT }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">应发数</span>
          <span class="info-value">{{ info.YF_NUM }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">基本养老保险</span>
          <span class="info-value">{{ info.BASE_YLBX }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">养老保险补扣</span>
          <span class="info-value">{{ info.YLBXBK }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">医疗保险</span>
          <span class="info-value">{{ info.YILBX }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">医疗保险补扣</span>
          <span class="info-value">{{ info.YILBX_BK }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">失业保险</span>
          <span class="info-value">{{ info.UNWORK_BX }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">失业保险补扣</span>
          <span class="info-value">{{ info.UNWORK_BX_BK }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">住房公积金</span>
          <span class="info-value">{{ info.HOME_FEE }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">公积金补扣</span>
          <span class="info-value">{{ info.HOME_FEE_BK }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">年金扣缴(税前)</span>
          <span class="info-value">{{ info.YEAR_FEE_SQ }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">年金补扣(税前)</span>
          <span class="info-value">{{ info.YEAR_BK_SQ }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">年金扣缴(税后)</span>
          <span class="info-value">{{ info.YEAR_KJ_SH }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">年金补扣(税后)</span>
          <span class="info-value">{{ info.YEAR_BK_SH }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">个人所得税</span>
          <span class="info-value">{{ info.PERS_TAX }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">年度绩效扣税</span>
          <span class="info-value">{{ info.YEAR_PERF_KS }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">个税调整</span>
          <span class="info-value">{{ info.PERS_TAX_TZ }}</span>
        </div>
        <div class="payroll-col">
          <span class="info-label">应扣合计</span>
          <span class="info-value">{{ info.TOTAL_YK_FEE }}</span>
        </div>
      </div>
      <div class="payroll-row">
        <div class="payroll-col">
          <span class="info-label">人工成本合计</span>
          <span class="info-value">{{ info.TOTAL_PERS }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { payrollDetail } from '@/api/publicline/board.js'

import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'

export default {
  data() {
    return {
      monthId: '',
      info: {}
    };
  },
  created() {
    this.monthId = this.$route.query.monthId
    this.getPayRollDetail()
  },
  methods: {
    // 工资单
    async getPayRollDetail() {
      const res = await payrollDetail({ loginId: Vue.ls.get(USER_INFO).username, monthId: this.monthId })
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
      }
    },
  }
}
</script>

<style lang="less" scoped>
.payroll-detials {

  .page-header {
    color: #FFF;
    padding: 14px 20px;
    background: radial-gradient(circle at 40px 0, #005799 0%, #0073cb 100%);
    position: relative;

    .title {
      padding-left: 2px;
    }
    .payroll-value {
      font-size: 22px;
      margin: 10px 0;
    }
    .payroll-month {
      padding-left: 2px;
      font-size: 13px;
      letter-spacing: 1px;
      color: #d8dfe5;
    }

    .user-info {
      position: absolute;
      right: 10px;
      top: 10px;
      text-align: right;
      line-height: 28px;
      font-size: 13px;
    }
  }

  .payroll-row {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    display: flex;
    background: #fff;
    font-size: 13px;

    .payroll-col {
      flex: 1;
      padding: 0 12px;
      border-right: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:last-child {
        border-right: none;
      }

      .info-label {
        color: #555;
      }
      .info-value {
        font-size: 14px;
      }
    }
  }
}
</style>